<template>
  <EditorPanel
    v-model:collapsed="editorState.menu.collapsed"
    class="h5-editor__menu"
    :class="{ 'multi-graph': multiGraph }"
    :trigger="!multiGraph"
    :before-toggle="beforeToggleCollapse"
  >
    <div class="flex items-end px-6 py-3 group-title">全部页面</div>
    <Scrollbar class="flex flex-col flex-1 px-4 overflow-hidden">
      <a-menu
        forceSubMenuRender
        v-model:selectedKeys="editorState.menu.selectedKeys"
        v-model:openKeys="editorState.menu.openKeys"
        mode="inline"
        @select="handleMenuSelect"
      >
        <template v-for="menu in editorState.menu.menus">
          <a-sub-menu v-if="menu.children" :key="menu.key">
            <template #icon>
              <i :class="{ opened: editorState.menu.openKeys.includes(menu.key) }" class="menu-arrow" />
            </template>
            <template #title>
              <AppstoreOutlined class="mr-1" />
              {{ menu.title }}
            </template>
            <a-menu-item :dataTitle="sub.title" :id="`menu-${sub.key}`" v-for="sub in menu.children" :key="sub.key">
              {{ sub.title }}
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item
            :dataTitle="menu.title"
            :id="`menu-${menu.key}`"
            class="no-line"
            v-else
            :key="menu.key.toString()"
          >
            {{ menu.title }}
          </a-menu-item>
        </template>
      </a-menu>
    </Scrollbar>
  </EditorPanel>
</template>

<script setup lang="ts">
import Scrollbar from '@cms/scrollbar'
import EditorPanel from '../components/EditorPanel.vue'
import { editorState, handleMenuSelect } from '../mixins/useEditorState'
withDefaults(defineProps<{ multiGraph?: boolean }>(), {
  multiGraph: false
})

const beforeToggleCollapse = (isCollapsed: boolean) => {
  if (isCollapsed) {
    editorState.menu.preOpenKeys = editorState.menu.openKeys
    editorState.menu.openKeys = []
    return
  }
  editorState.menu.openKeys = editorState.menu.preOpenKeys
}
</script>

<style scoped></style>
